﻿
@using System.Web.Mvc
@using System.Web.Routing
@using Coevery.Relationship.Models
@using System.Web.Mvc.Html
@using Orchard.Mvc.Html
@model ManyToManyRelationshipModel

<style>
    .pickList .btn [class^="icon-"] {
        width: auto;
    }
</style>

@helper DisplayInput(string label, HtmlString input, string labelClass) {
    <section class="data-row control-group">
        <label class="control-label @labelClass">
            @label
        </label>
        <div class="controls errortips">
            @input
        </div>
    </section>
}

<header id="page-title">
    <h1 class="pull-left">Many to Many Relationship Detail<span>show many to many relationship detail information</span></h1>
</header>

<section id="main-content" style="margin-top: 47px">
    <div id="page-actions" class="clearfix">
        <btn-actions>
            <button class="btn btn-small" data-ng-click="exit()">Back</button>
            <button class="btn btn-primary btn-small" data-indi-click="saveAndView()">Save</button>
            <button class="btn btn-small btn-primary" data-indi-click="saveAndBack()">Save & Back</button>
        </btn-actions>
    </div>
    <div class="row-fluid">
        @using (Html.BeginFormAntiForgeryPost(Html.ViewContext.HttpContext.Request.Url.PathAndQuery, FormMethod.Post
                                              , new { @class = "form-horizontal no-border edit-mode", id = "manytomany-form" }))
        {
            @Html.ValidationSummary()
            @Html.HiddenFor(model=>model.IsCreate,new {id="IsCreate"})
            
            <fieldset>
                <legend>General Information</legend>
                @DisplayInput("Relationship Name"
                              , Html.TextBoxFor(model => model.Name, new {@class = "span12",id = "relation-name", required=""})
                              , "required")
                    
                @DisplayInput("Primary Entity"
                              , Html.TextBoxFor(model => model.PrimaryEntity
                              , new {@class = "span12 primary-entity", required=""})
                              , "required")
                
                @if (Model.IsCreate) {
                    @DisplayInput("Related Entity"
                                  , Html.DropDownListFor(model => model.RelatedEntity, Model.EntityList,
                                                         "Please select related entity", new {@class = "span12 related-entity", required=""})
                                  , "required")
                }
                else {
                    @DisplayInput("Related Entity"
                                  , Html.TextBoxFor(model => model.RelatedEntity, new {@class = "span12 related-entity", disabled="disabled"})
                                  , null)
                } 
                
            </fieldset>
            <fieldset>
                <legend>Primary Entity Display Option</legend>

                @DisplayInput("Primary Entity List Label"
                              , Html.TextBoxFor(model => model.PrimaryListLabel, new {@class = "span12", required=""})
                              , "required")

                <section class="data-row control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" ng-model="showPrimaryList" value="true" id="showPrimaryList"
                                   name="@Html.NameFor(model => model.ShowPrimaryList)"
                                 @if (Model.ShowRelatedList) { <text> data-ng-init ="showPrimaryList=true" </text>}/>
                            Show Primary Entity List in the Related Entity's Detail Page
                        </label>
                    </div>
                </section>
                
                <section class="data-row control-group" ng-show="showPrimaryList">
                    <div class="controls">
                        @Html.ListBoxFor(m=>m.PrimaryColumnList, Model.PrimaryFields)
                    </div>
                </section>
            </fieldset>
            <fieldset>
                <legend>Related Entity Display Option</legend>
                @DisplayInput("Related Entity List Label"
                              , Html.TextBoxFor(model => model.RelatedListLabel, new {@class = "span12", required=""})
                              , "required")

                
                <section class="data-row control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" ng-model="showRelatedList" value="true" id="showRelatedList"
                                   name="@Html.NameFor(model => model.ShowRelatedList)"
                                 @if (Model.ShowRelatedList) { <text> data-ng-init ="showRelatedList=true" </text>}/>
                            Show Related Entity List in the Primary Entity's Detail Page
                        </label>
                    </div>
                </section>              

                <section class="data-row control-group" ng-show="showRelatedList">
                    <div class="controls">
                        @Html.ListBoxFor(m=>m.RelatedColumnList, Model.RelatedFields)
                    </div>
                </section>
            </fieldset>
        }
    </div>
</section>

<script>
    function customPicklist(element) {
        element.picklist({
            addAllLabel: '<i class="icon-caret-right"></i><i class="icon-caret-right"></i>',
            addLabel: '<i class="icon-caret-right"></i>',
            removeAllLabel: '<i class="icon-caret-left"></i><i class="icon-caret-left"></i>',
            removeLabel: '<i class="icon-caret-left"></i>',
            sourceListLabel: "Available Fields",
            targetListLabel: "Selected Fields"
        });
    }

    $(document).ready(
        function () {
            customPicklist($("#@Html.FieldIdFor(m=>m.PrimaryColumnList)"));
            customPicklist($("#@Html.FieldIdFor(m=>m.RelatedColumnList)"));

            var jsonUrl = "@Url.Action("FieldNames", "SystemAdmin",new RouteValueDictionary { { "Area", "Coevery.Relationship" } })";
            var versionPri = 0;
            var versionRel = 0;
            var getFields = function (entityName, version, selectElement, isRepicklist) {
                if (!entityName) {
                    return;
                }
                $.post(jsonUrl, {
                        entityName: entityName,
                        version: ++version,
                        __RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()
                    },
                    function (data) {
                        if (version == data.version && data.result) {
                            if (isRepicklist) {
                                selectElement.picklist("destroy");
                            }
                            customPicklist(selectElement.html(data.result));
                        }
                    },
                    "json"
                );
            };
           
            if ("@Model.IsCreate" == "False") {
                $("#relation-name").prop('disabled', true);
            } else {                
                $("select.related-entity").change(function () {
                    getFields($("select.related-entity option:selected").val(), versionRel, $("#@Html.FieldIdFor(m=>m.RelatedColumnList)"), true);
                });
            }

            $("input.primary-entity").prop('disabled', true);       
        }
    );
</script>